<html>
  <head>
    <meta charset="utf-8" />
    <title>Lesson08 React第八课之列表与Keys</title>
  </head>
  <body>
    <div id="app"></div>

    
    <!-- 没有网络时使用本地库 -->
    <!-- <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.min.js"></script> -->
    <!-- 有网络时使用网络资源 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      const appDom = document.getElementById('app');
      // 定义列表项组件
      function ListItem(props) {
        return <li>{props.item}</li>;
      }

      // 定义列表组件
      function List(props) {
        const { lists } = props;
        const listItems = lists.map((item, index) => 
          <ListItem key={`item-${index}`} item={item}/>
        );
        return listItems;
      }

      // 定义一组列表数据
      const lists = ['HTML', 'CSS', 'JavaScript', 'Vue', 'React'];
      ReactDOM.render(<List lists={ lists }/>, appDom);
    </script>
  </body>
</html>